<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background: #333333;
			}
			/*头像区*/
			.user-head {
				width: 150px;
				height: 150px;
				margin: 20px auto;
				border-radius: 50%;
				border: 5px solid #FFFFFF;
				overflow: hidden;
			}
			.user-head img {
				width: 100%;
				display: block;
			}
			
			.nav-left .list-group{
				width: 1000px;
				overflow: hidden;
				margin: 0 auto;
			}
			
			/*左侧导航菜单*/
			.nav-left .list-group-item {
				background: transparent;
				border: none;
				border-radius: 0;
				text-align: center;
				font-size: 16px;
				color: #EEEEEE;
				letter-spacing: 1px;
				border-bottom: 1px solid #444444;
				float: left;
				margin-left: 44px;
			}
			.nav-left .list-group-item:active {
				top:1px;
			}
		</style>	
	</head>
	<body>
		<div class="container-fluid">
			<!--头像区-->
			<div class="row user-head">
				<a href="UpdateUserPic.html" target="content" title="点击修改用户头像">
					<img src="images/liudehua.jpg" id="userPic" class="img-responsive" />
				</a>
			</div>			
			<!--欢迎 -->
			<p class="text-center" style="color:#EEEEEE">
				欢迎你，<span id="userLoginName"></span>
			</p>
			<!--列表组 -->
			<div class="row nav-left">
				<div class="list-group">
					<input type="button" value="个人信息" class="list-group-item" id="message"/>
					<input type="button" value="修改密码" class="list-group-item" id="pwd"/>
					<input type="button" value="我的关注" class="list-group-item" id="attention"/>
					<input type="button" value="我的收藏" class="list-group-item" id="collect"/>
					<input type="button" value="我的课程" class="list-group-item" id="sourse"/>
					<input type="button" value="上传课程" class="list-group-item" id="up"/>
					<input type="button" value="退出登录" class="list-group-item" id="quit"/>
				</div>
				<div id="msg"></div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script>
			//从本地缓存中 获取 用户名 和用户头像
			if(localStorage.getItem('userPic')){
				$('#userPic').attr('src' , localStorage.getItem('userPic'));
			}
			if(localStorage.getItem('userLoginName')){
				$('#userLoginName').text(localStorage.getItem('userLoginName'));				
			}
			$('#message').click(function(){
				$.get('UpdateUser.html',function(data){
					$('#msg').html(data);
				});
			});
			
			$('#pwd').click(function(){
				$.get('UpdateUserPwd.html',function(data){
					$('#msg').html(data);
				});
			});
			
			$('#up').click(function(){
				$.get('AddSourse.html',function(data){
					$('#msg').html(data);
				});
			});
			
			$('#quit').click(function(){
				location.href='logout.jsp';
			});
		</script>
		
	</body>
</html>
